<template>
	<view class="content" style="color: #F2F2F2;">
		<view class="view1">
			<view class="view1-view">
				<view style="display: flex; flex-direction: row;">
					<image src="../../static/img/common/logo.jpg" style="border-radius: 100upx;width: 100upx;height: 100upx;margin-left: 30upx;"></image>
					<view class="login-view-text1" style="margin-left: 30upx;">
						<view style="color: #834E1F;font-size: 32upx;">{{ memberName }}</view>
						<view v-if="memberName != '游客'" style="color: #834E1F; font-size: 24upx;margin-top: 10upx;">{{InviteMoneyName}}{{InviteMoney}}</view>
					</view>
				</view>

				<view class="view1-view1" style="display: flex;flex-direction: row;">
					<view class="view1-view2" style="margin-top: 40upx; margin-left: 20upx;text-align: center;">
						<view class="view1-view1-text1">已邀请好友</view>
						<view class="view1-view1-text2" style="margin-left: 10upx;">{{ invite }}人</view>
					</view>
					<view class="view1-view2" style="margin-top: 40upx; margin-left: 20upx;text-align: center;" @tap="goInvitationUser">
						<view class="view1-view1-text1">未邀请</view>
						<view class="view1-view1-text2">{{ notInvite }}人</view>
					</view>
					<view v-if="member != 4" class="view1-view2" style="margin-top: 40upx; margin-left: 20upx;text-align: center;"
					 @tap="goChongzhi(member, money,memberName1)">
						<view class="view1-view1-text1">去付费</view>
						<view class="view1-view1-text2">¥ {{ money }}</view>
					</view>
					<view v-if="member === 4" class="view1-view2" style="margin-top: 40upx; margin-left: 20upx;text-align: center;">
						<view class="view1-view1-text1">已是最高等级</view>
						<view class="view1-view1-text2">无法提高了</view>
					</view>
					<view class="view1-view2" style="margin-top: 40upx; margin-left: 20upx;text-align: center;">
						<view class="view1-view1-text1">今日可接单</view>
						<view class="view1-view1-text2">{{ UserInviteNumber }}</view>
					</view>
				</view>
				<button type="warn" class="view1-view3-button" @tap="goInvitationUser">{{btnMessage}}</button>
			</view>
		</view>

		<view class="view2" v-if="memberName != '游客' && member != 4">
			<view style="font-size: 40upx; padding: 30upx 0 0 20upx; color: #000000;">会员等级</view>
			<view style="display: flex;flex-direction: row;">
				<view class="view2-view" @tap="goChongzhi(1, rate2,'初级会员')">
					<view class="view2-view1">邀{{ ratePeople2 }}人</view>
					<view class="view2-view2">或支付{{ rate2 }}元</view>
					<view class="view2-view3">激活初级会员</view>
				</view>
				<view class="view2-view" @tap="goChongzhi(2, rate3,'中级会员')">
					<view class="view2-view1">邀{{ ratePeople3 }}人</view>
					<view class="view2-view2">或支付{{ rate3 }}元</view>
					<view class="view2-view3">激活中级会员</view>
				</view>
				<view class="view2-view" @tap="goChongzhi(3, rate4,'高级会员')">
					<view class="view2-view1">邀{{ ratePeople4 }}人</view>
					<view class="view2-view2">或支付{{ rate4 }}元</view>
					<view class="view2-view3">激活高级会员</view>
				</view>
			</view>
		</view>

		<view class="view3" :style=" memberName == '游客' || member === 4 ? 'margin-top: 100upx;' : ''">
			<view style="text-align: center;width: 80upx;background: #E8BD8E;font-size: 24upx;color: #333333;">奖励1</view>
			<view style="font-size: 30upx;color: #333333;margin: 20upx 0 0 20upx;">邀请好友立得最高{{reward}}元红包可提现到支付宝</view>

			<view class="view3-view">
				<view class="view3-view1" style="display: flex;flex-direction: row;">
					<view class="picture-icon1" style="border-radius: 50%; background-color: #BE8040; color: #FFFFFF; height: 40upx;width: 40upx;margin: 30upx 0 0 90upx;">
						<view style="justify-content: center; text-align: center;padding-top: 5upx;">1</view>
					</view>
					<view style="background-color: #BE8040;height: 1upx;width: 25%;margin-top: 50upx;"></view>
					<view class="picture-icon1" style="border-radius: 50%; background-color: #BE8040; color: #FFFFFF; height: 40upx;width: 40upx;margin: 30upx 0 0 0;">
						<view style="justify-content: center; text-align: center;padding-top: 5upx;">2</view>
					</view>
					<view style="background-color: #BE8040;height: 1upx;width: 30%;margin-top: 50upx;"></view>
					<view class="picture-icon1" style="border-radius: 50%; background-color: #BE8040; color: #FFFFFF; height: 40upx;width: 40upx;margin: 30upx 0 0 0;">
						<view style="justify-content: center; text-align: center;padding-top: 5upx;">3</view>
					</view>
				</view>

				<view class="view3-view1" style="display: flex;flex-direction: row;">
					<view style="color: #BE8040;width: 20%;font-size: 24upx; margin: 10upx 0 0 50upx;text-align: center;">分享活动给好友</view>
					<view style="color: #BE8040;width: 20%;font-size: 24upx; margin: 10upx 0 0 10%;text-align: center;">好友接受 邀请</view>
					<view style="color: #BE8040;width: 29%;font-size: 24upx; margin: 10upx 0 0 10%;text-align: center;">好友注册并 成为正式会员</view>
				</view>
			</view>
		</view>

		<view class="view3">
			<view style="text-align: center;width: 80upx;background: #E8BD8E;font-size: 24upx;color: #333333;">奖励2</view>
			<view style="font-size: 32upx;color: #333333;margin: 20upx 0 0 20upx;">邀请好友做任务获得赏金</view>
			<view class="view4-view">
				<view class="view4-view1" style="background: #E8BD8E;background-size: 100%;">
					<view style="font-size: 32upx;color: #A76A22;margin-top: 10upx;">直属好友奖金</view>
					<view style="background:#FFFFFF;border-radius: 8upx; background-size: 100%;height: 130upx;width: 97%;margin-top: 20upx;display: flex;">
						<view v-for="(item,index) in zhiHelpRates" :key='index'>
							<view style="margin-left: 20upx;width: 130upx;text-align: center;margin-top: 30upx;" v-if="index === 0">
								<view style="color: #A76A22;font-size: 32upx;">未激活</view>
								<view style="color: #A76A22; font-size: 28upx;">{{item.rate * 100}}%</view>
							</view>
							<view style="margin-left: 20upx;width: 130upx;text-align: center;margin-top: 30upx;" v-if="index === 1">
								<view style="color: #A76A22;font-size: 32upx;">初级</view>
								<view style="color: #A76A22; font-size: 28upx;">{{item.rate * 100}}%</view>
							</view>
							<view style="margin-left: 20upx;width: 130upx;text-align: center;margin-top: 30upx;" v-if="index === 2">
								<view style="color: #A76A22;font-size: 32upx;">中级</view>
								<view style="color: #A76A22; font-size: 28upx;">{{item.rate * 100}}%</view>
							</view>
							<view style="margin-left: 20upx;width: 130upx;text-align: center;margin-top: 30upx;" v-if="index === 3">
								<view style="color: #A76A22;font-size: 32upx;">高级</view>
								<view style="color: #A76A22; font-size: 28upx;">{{item.rate * 100}}%</view>
							</view>
						</view>
					</view>
				</view>
				<view class="view4-view1" style="background: #E8BD8E;background-size: 100%;">
					<view style="font-size: 32upx;color: #A76A22;margin-top: 10upx;">非直属好友奖金</view>
					<view style="background: #fff;border-radius: 8upx;background-size: 100%;height: 130upx;width: 97%;margin-top: 20upx;display: flex;">
						<view v-for="(item,index) in feiHelpRates" :key='index'>
							<view style="margin-left: 20upx;width: 130upx;text-align: center;margin-top: 30upx;" v-if="index === 0">
								<view style="color: #A76A22;font-size: 32upx;">未激活</view>
								<view style="color: #A76A22; font-size: 28upx;">{{item.rate * 100}}%</view>
							</view>
							<view style="margin-left: 20upx;width: 130upx;text-align: center;margin-top: 30upx;" v-if="index === 1">
								<view style="color: #A76A22;font-size: 32upx;">初级</view>
								<view style="color: #A76A22; font-size: 28upx;">{{item.rate * 100}}%</view>
							</view>
							<view style="margin-left: 20upx;width: 130upx;text-align: center;margin-top: 30upx;" v-if="index === 2">
								<view style="color: #A76A22;font-size: 32upx;">中级</view>
								<view style="color: #A76A22; font-size: 28upx;">{{item.rate * 100}}%</view>
							</view>
							<view style="margin-left: 20upx;width: 130upx;text-align: center;margin-top: 30upx;" v-if="index === 3">
								<view style="color: #A76A22;font-size: 32upx;">高级</view>
								<view style="color: #A76A22; font-size: 28upx;">{{item.rate * 100}}%</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="view3">
			<view style="text-align: center;width: 80upx;background: #E8BD8E;font-size: 24upx;color: #333333;">奖励3</view>
			<view style="font-size: 16px;color: #333333;margin: 20upx 0 0 20upx;">会员尊享特权</view>
			<view style="display: flex;flex-direction: row;">
				<view class="view3-view3">
					<image src="../../static/img/invitation/invite3.jpg" style="width: 100upx;height: 100upx;"></image>
					<view style="font-size: 24upx;color: #BE8040;margin-top: 10upx;">初级会员 得{{InviteMoney1}}%的赏金，每日可接单数{{InviteNumber1}}</view>
				</view>
				<view class="view3-view3">
					<image src="../../static/img/invitation/invite3.jpg" style="width: 100upx;height: 100upx;"></image>
					<view style="font-size: 24upx;color: #BE8040;margin-top: 10upx;">中级会员 得{{InviteMoney2}}%的赏金，每日可接单数{{InviteNumber2}}</view>
				</view>
				<view class="view3-view3">
					<image src="../../static/img/invitation/invite3.jpg" style="width: 100upx;height: 100upx;"></image>
					<view style="font-size: 24upx;color: #BE8040;margin-top: 10upx;">高级会员 得{{InviteMoney3}}%的赏金，每日可接单数{{InviteNumber3}}</view>
				</view>
			</view>
		</view>

		<view class="view5">
			<view style="font-size: 32upx; padding: 30upx 0 0 20upx; color: #000000;">我的奖金</view>

			<view style="display: flex;flex-direction: row; justify-content: center;margin-top: 30upx;">
				<view style="width: 33%;text-align: center;margin-left: 20upx;">
					<view style="font-size: 38upx;color: #000000;font-weight: bold;">{{ count }}</view>
					<view style="font-size: 28upx;color: #666666;">注册会员人数</view>
				</view>
				<view style="width: 33%;text-align: center;margin-left: 20upx;">
					<view style="font-size: 38upx;color: #000000;font-weight: bold;">{{ zhishuMoney }}</view>
					<view style="font-size: 28upx;color: #666666;">直属获得奖金</view>
				</view>
				<view style="width: 33%;text-align: center;margin-left: 20upx;">
					<view style="font-size: 38upx;color: #000000;font-weight: bold;">{{ feizhishuMoney }}</view>
					<view style="font-size: 28upx;color: #666666;">非直属获得奖金</view>
				</view>
			</view>
			<button type="warn" class="view5-button" @click="goDetial">查看奖金详情</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rate2: '0',
				memberName: '游客',
				memberName1: '',
				InviteMoney: 0,
				InviteMoney1: 0,
				InviteMoney2: 0,
				InviteMoney3: 0,
				UserInviteNumber: 0,
				InviteNumber: 0,
				InviteNumber1: 0,
				InviteNumber2: 0,
				InviteNumber3: 0,
				InviteMoneyName: '',
				zhishuMoney:'0',
				feizhishuMoney:'0',
				btnMessage: '',
				rate3: '0',
				rate4: '0',
				ratePeople2: '0',
				userId: '',
				ratePeople3: '0',
				ratePeople4: '0',
				invite: '0',
				notInvite: '0',
				nickName: '',
				member: 0,
				reward: 0,
				rate: 0,
				feiHelpRates: [],
				zhiHelpRates: [],
				imageUrl: '/static/logo.jpg',
				money: '0',
				count: '0',
				moneyReward: '0'
			};
		},
		onShow() {
			this.userId = this.$queue.getData('userId');
			if (!this.userId) {
				this.btnMessage = '跟我一起邀请好友做任务赚大钱';
			} else {
				this.getUserMoney(this.userId);
				this.$Request.getT('/helpTask/orderCountByDay?userId=' + this.userId).then(res => {
					if (res.code === 0) {
						this.UserInviteNumber = res.data;
					}
				});
			}
			let image_url = this.$queue.getData('image_url');
			if (image_url && image_url !== 'undefined') {
				this.imageUrl = image_url;
			} else {
				this.imageUrl = '/static/img/common/logo.jpg';
			}
			this.getInvitationList();

			this.$Request.getT('/common/type/107').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.InviteNumber = res.data.value;
					}
				}
			});
			this.$Request.getT('/common/type/108').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.InviteNumber1 = res.data.value;
					}
				}
			});
			this.$Request.getT('/common/type/109').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.InviteNumber2 = res.data.value;
					}
				}
			});
			this.$Request.getT('/common/type/110').then(res => {
				if (res.code === 0) {
					if (res.data && res.data.value) {
						this.InviteNumber3 = res.data.value;
					}
				}
			});
		},
		methods: {
			getUserMoney(userId){
				this.$Request.getT('/invite/selectZhiFeiMoney?userId=' + userId).then(res =>{
					if(res.code === 0){
						this.zhishuMoney = res.data.zhiUserInviteMoney;
						this.feizhishuMoney = res.data.feiUserInviteMoney;
					}
				});
			},
			goChongzhi(number, money, name) {
				let token = this.$queue.getData('token');
				let userId = this.$queue.getData('userId');
				let that = this;
				if (token) {
					if (this.member <= number) {
						uni.showModal({
							title: '充值提示',
							content: '是否支付' + money + '元激活' + name,
							showCancel: true,
							cancelText: '取消',
							confirmText: '确认',
							success: res => {
								if (res.confirm) {
									that.$Request.postJson('userMoney/openMember?member=' + number + '&userId=' + userId).then(res => {
										if (res.code === 0) {
											that.$queue.showToast("支付成功!");
											this.getInvitationList();
											this.$Request.getT('/helpTask/orderCountByDay?userId=' + this.userId).then(res => {
												if (res.code === 0) {
													this.UserInviteNumber = res.data;
												}
											});
										} else {
											uni.showModal({
												title: '温馨提示',
												content: '您的余额不足，请前往充值',
												showCancel: true,
												cancelText: '取消',
												confirmText: '确认',
												success: res => {
													if (res.confirm) {
														uni.navigateTo({
															url: '../task/recharge?title=会员充值'
														});
													}
												}
											});
										}
									});
								}
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '你已经是' + this.memberName + '了，不能降级'
						});
					}
				} else {
					this.goLoginInfo();
				}
			},
			getInvitationList() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/selectInvite?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.money = res.data.money;
						this.invite = res.data.invite;
						this.notInvite = res.data.notInvite;
						this.rate2 = res.data.helpRatesPeople[0].rate;
						this.rate3 = res.data.helpRatesPeople[1].rate;
						this.rate4 = res.data.helpRatesPeople[2].rate;
						this.ratePeople2 = res.data.helpRatesInvite[0].rate;
						this.ratePeople3 = res.data.helpRatesInvite[1].rate;
						this.ratePeople4 = res.data.helpRatesInvite[2].rate;
						this.moneyReward = res.data.moneyReward;
						this.reward = res.data.reward;
						this.feiHelpRates = res.data.feiHelpRates;
						this.zhiHelpRates = res.data.zhiHelpRates;
						this.rate = res.data.rate * 100;
						this.count = res.data.count;
						this.imageUrl = '/static/img/common/logo.jpg';
						this.InviteMoney1 = ((res.data.helpRatesRate[0].rate - res.data.helpRatesRate[1].rate) * 100).toFixed(1);
						this.InviteMoney2 = ((res.data.helpRatesRate[0].rate - res.data.helpRatesRate[2].rate) * 100).toFixed(1);
						this.InviteMoney3 = ((res.data.helpRatesRate[0].rate - res.data.helpRatesRate[3].rate) * 100).toFixed(1);
						if (res.data.user) {
							if (res.data.user.nickName) {
								this.nickName = res.data.user.nickName;
							} else {
								this.nickName = res.data.user.phone;
							}
							if (res.data.user.imageUrl) {
								this.imageUrl = res.data.user.imageUrl;
							}
							this.member = res.data.user.member;
							if (res.data.user.member) {
								if (res.data.user.member === 1) {
									this.btnMessage = '邀请好友免费激活';
									this.InviteMoneyName = '激活初级会员预计每单可额外赚';
									this.InviteMoney = ((res.data.helpRatesRate[0].rate - res.data.helpRatesRate[1].rate) * 100).toFixed(1) +
										'%';
									this.memberName = '未激活';
									this.memberName1 = '成为初级会员';
								} else if (res.data.user.member === 2) {
									this.btnMessage = '邀请好友激活中级会员';
									this.InviteMoneyName = '激活中级会员预计每单可额外赚';
									this.InviteMoney = ((res.data.helpRatesRate[0].rate - res.data.helpRatesRate[2].rate) * 100).toFixed(1) +
										'%';
									this.memberName = '初级会员';
									this.memberName1 = '成为中级会员';
								} else if (res.data.user.member === 3) {
									this.btnMessage = '邀请好友激活高级会员';
									this.InviteMoneyName = '激活高级会员预计每单可额外赚';
									this.InviteMoney = ((res.data.helpRatesRate[0].rate - res.data.helpRatesRate[3].rate) * 100).toFixed(1) +
										'%';
									this.memberName = '中级会员';
									this.memberName1 = '成为高级会员';
								} else if (res.data.user.member === 4) {
									this.btnMessage = '邀请好友获得更多赏金';
									this.InviteMoney = ((res.data.helpRatesRate[0].rate - res.data.helpRatesRate[3].rate) * 100).toFixed(1) +
										'%';
									this.InviteMoneyName = '您已是高级会员预计每单可额外赚';
									this.memberName = '高级会员';
									this.notInvite = 0;
								}
							} else {
								this.memberName = '游客';
							}
						} else {
							this.InviteMoney = '';
							this.InviteMoneyName = '';
							this.memberName = '游客';
							this.member = 0;
						}
					}
				});
			},
			goInvitationUser() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: './invitationUser'
					});
				} else {
					this.goLoginInfo();
				}
			},
			goDetial() {
				let token = this.$queue.getData('token');
				if (token) {
					uni.navigateTo({
						url: './invitationDetial'
					});
				} else {
					this.goLoginInfo();
				}
			},
			//统一登录跳转
			goLoginInfo() {
				this.$queue.setData('href', '/pages/invitation/index');
				uni.navigateTo({
					url: '/package-task/pages/public/login'
				});
			}
		}
	};
</script>

<style>
	.view1 {
		/* background: url(../../static/img/yaoqing/backgroud.png); */
		/* background: linear-gradient(to right, #F15B6C, #e10a07); */
		background:#F15B6C;
		width: 100%;
		height: 350upx;
		padding-top: 40upx;
	}

	.view1-view1-text1 {
		color: #834E1F;
		font-size: 24upx;
	}

	.view1-view1-text2 {
		color: #834E1F;
		font-size: 30upx;
		margin-left: 10upx;
	}

	.view2 {
		background-color: #ffffff;
		width: 93%;
		height: 300upx;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 100upx;
	}

	.view3 {
		background-color: #ffffff;
		width: 93%;
		height: max-content;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 30upx;
		margin-bottom: 20upx;
		padding-bottom: 20upx;
	}

	.view5 {
		background-color: #ffffff;
		width: 93%;
		height: fit-content;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 30upx;
		margin-bottom: 20upx;
		padding-bottom: 20upx;
	}

	.view2-view {
		border: 1px solid #dee0de;
		margin: 30upx 0 0 25upx;
		width: 200upx;
		height: 160upx;
		border-radius: 20upx;
		text-align: center;
		padding-top: 3%;
	}

	.view2-view1 {
		color: #8F673D;
		font-size: 32upx;
	}

	.view2-view2 {
		font-size: 24upx;
		color: #8F673D;
	}

	.view2-view3 {
		font-size: 24upx;
		color: #666666;
	}

	.view3-view3 {
		margin: 20upx 0 0upx 40upx;
		width: 180upx;
		height: max-content;
		text-align: center;
	}

	.view4-view1 {
		margin: 30upx 0 0 15upx;
		width: 95%;
		height: 245upx;
		padding: 10upx 0upx 0upx 20upx;
	}

	.view1-view {
		background-color: #fff9e1;
		width: 93%;
		height: 380upx;
		margin-left: 26upx;
		border-radius: 20upx;
		padding-top: 40upx;
	}

	.view1-view3-button {
		border-radius: 50upx;
		margin: 30upx 50upx 20upx 50upx;
		font-size: 34upx;
		color: #ffffff;
		height: 80upx;
		line-height: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view5-button {
		margin: 30upx 50upx 20upx 50upx;
		font-size: 30upx;
		color: #ffffff;
		height: 80upx;
		line-height: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view1-view1 {
		width: 100%;
	}

	.view1-view2 {
		width: 25%;
		height: max-content;
	}
</style>
